<template>
    <div class="preferred">
        <div class="p_header">
            <input v-model="msg1" v-on:input="write1()" class="header_one" placeholder="看中了就剁手" type="text"/>
            <image class="header_two" src="../web/img/shop_store_massage.png" style="width:44px;height:44px;"></image>
            <image class="header_three" src="../web/img/searchIco.png" style="width:34px;height:34px;"></image>
        </div>
        <div class="p_sec">
            <div class="sec_meuns">
                <text v-for="i in listClass" class="sec_meuns_cont">{{i}}</text>
            </div>
            <div class="sec_text_box">
                <div v-for="i in listGoods"  class="sec_text_sbox">
                    <image class="sec_text_img" :src="i.img"></image>
                    <text class="sec_text">{{i.text}}</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "preferred",
        data(){
            return{
                msg1:"",
                listClass:["火锅店","拖拉机专修店","串串","羊肉泡馍","烤肉肉","啦啦啦啦","肉夹馍","盖浇饭","呵呵呵",],
                listGoods:[
                    {
                        img:"../web/img/logo.png",
                        text:"好东西东西"
                    },
                    {
                        img:"../web/img/logo.png",
                        text:"好东西东西"
                    },
                    {
                        img:"../web/img/logo.png",
                        text:"好东西东西"
                    },
                    {
                        img:"../web/img/logo.png",
                        text:"好东西东西asdsas"
                    },
                ],
            }
        },
        methods:{
            write1(){
                document.getElementsByClassName("header_three")[0].style.display="none";
                if(this.msg1===''){
                    document.getElementsByClassName("header_three")[0].style.display="block";
                }
            },
        },
        mounted(){
            for (var i in document.getElementsByClassName("sec_meuns_cont")){
                // console.log(i);
                // console.log(document.getElementsByClassName("sec_meuns_cont")[i]);
                if(i==0){
                    document.getElementsByClassName("sec_meuns_cont")[i].style.color="#79d1a0";
                    document.getElementsByClassName("sec_meuns_cont")[i].style.borderLeft="3px solid #79d1a0";
                }
            }

        },
    }
</script>

<style scoped>
    .sec_text_box{
        flex:1;
        display:block;
        margin-left:16px;
    }
    .sec_text_sbox{
        /*margin-top:44px;*/
        margin:52px 0;
        float:left;
        width:160px;
        align-items: center;
    }
    .p_sec{
        flex-direction: row;
    }
    .sec_text{
        font-size: 28px;
        color:#333;
        text-align: center;
        font-weight: 300;
    }
    .sec_text_img{
        width:104px;
        height:104px;
        margin-bottom:34px;
        border-radius: 50%;
    }
    .sec_meuns{
        width:163px;
        overflow: hidden;
        border-right:1px solid #ccc;
        height:100vh;
    }
    .p_sec{
        padding:0 25px;
    }
    .sec_meuns_cont{
        margin:33px 0;
        font-size: 30px;
        color:#333;
        font-weight: 300;
        text-align:center;
    }
    input::-webkit-input-placeholder{
        color:#777;
        font-weight: 300;
    }
    .header_three{
        position: absolute;
        top:28px;
        left:190px;
    }
    .header_two{
        margin-left:45px;
    }
    .header_one{
        margin-left:35px;
        height:50px;
        width:580px;
        border-radius: 25px;
        outline: none;
        border:1px solid #999;
        text-align: center;
        letter-spacing: 3px;
        font-weight: 600;
    }
    .p_header{
        flex-direction: row;
        height:90px;
        align-items: center;
        box-shadow: 0 2px 5px #bdbdbd;
        position: relative;
    }
.preferred{
    width:100%;
    flex:1;
    overflow: hidden;
}
</style>